/*
 * @Author: www.itab.link
 * @Date: 2024-04-11 22:58:14
 * @LastEditors: itab.link
 * @LastEditTime: 2024-04-12 20:35:45
 * @Description: file content
*/
<template>
  <div
    class="footer-nav w-full text-sm h-[500px] bg-cover bg-center bg-no-repeat pt-16"
    style="background-image: url(/images/image23.jpg)"
  >
    <!-- <img src="/images/image23.jpg" alt="" /> -->
    <div class="relative max-w-[1230px] mx-auto text-white flex px-2">
      <div class="min-w-[50%]">
        <span
          class="font-bold text-white text-3xl px-2 py-1 mt-10"
          style="background-color: #bfbebf"
          >HANMING
        </span>
        <div class="title-circle font-bold text-lg my-5 relative">联系我们</div>
        <div class="flex content-between mb-2">
          <i class="d-icon" style="font-size: 18px"> <Call48Regular /></i
          >电话：00000000
        </div>
        <div class="flex content-between">
          <i class="d-icon" style="font-size: 18px"> <Location48Regular /></i
          >地址：广州市
        </div>
        <div class="mt-4 w-[120px]">
          <img class="h-[120px]" src="/images/image17.jpg" alt="" />
          <div class="text-center mt-2">官方公众号</div>
        </div>
      </div>
      <div class="w-[500px] leading-7 pt-[110px]">
        <div
          v-for="item of phoneList"
          :key="item.phone"
          class="w-1/2 inline-block"
        >
          销售：{{ item.name }}
          <span class="ml-2">{{ item.phone }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="corpicy bg-gray-950 text-white text-center py-10">
    <div>陕ICP备2024024263号-2</div>
    <div class="opacity-30">Copyright @ 2023-present iTab</div>
  </div>
</template>
  
  <script setup>
import { Call48Regular, Location48Regular } from '@vicons/fluent'
import { nextTick } from 'vue'
const phoneList = [
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
  { name: '销售员', phone: '18888888888' },
]
nextTick(() => {
  // document.querySelector('html').classList = 'dark'
})
  </script>
  
  <style lang="less" scoped>
.title-circle {
  &:before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    left: -30px;
    top: 8px;
    border: 3px solid #ffd138;
  }
}
</style>>
  